<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系人综合统计报表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
            padding: 30px;
        }

        .header {
            text-align: center;
            margin: 30px 0 50px;
        }

        .header h1 {
            color: #007BFF;
            font-size: 42px;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .header p {
            color: #6c757d;
            font-size: 18px;
        }

        .chart-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 40px;
            max-width: 1600px;
            margin: 0 auto;
        }

        .chart-card {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
            transition: all 0.3s ease;
        }

        .chart-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .chart-title {
            text-align: center;
            margin-bottom: 30px;
            color: #007BFF;
            font-size: 24px;
            font-weight: 600;
            position: relative;
            padding-bottom: 15px;
        }

        .chart-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #007BFF, #28a745);
        }

        .chart {
            height: 450px;
            width: 100%;
        }

        @media (max-width: 992px) {
            .chart-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<div class="header">
    <h1>联系人综合统计报表</h1>
    <p>月度趋势、分类分布与汇总数据可视化分析</p>
</div>

<div class="chart-container">
    <!-- 月度趋势图 -->
    <div class="chart-card">
        <h2 class="chart-title">联系人月度新增数量趋势图</h2>
        <div id="monthlyChart" class="chart"></div>
    </div>

    <!-- 分类饼图 -->
    <div class="chart-card">
        <h2 class="chart-title">联系人分类分布饼状图</h2>
        <div id="pieChart" class="chart"></div>
    </div>

    <!-- 分类柱状图 -->
    <div class="chart-card">
        <h2 class="chart-title">联系人分类汇总柱状图</h2>
        <div id="barChart" class="chart"></div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />

<script th:inline="javascript">
    /*<![CDATA[*/
    // 获取后端传递的数据
    const months = [[${months}]];
    const counts = [[${counts}]];
    const dataCountByCategory = [[${dataCountByCategory}]];

    // 1. 初始化月度趋势图
    const monthlyChart = echarts.init(document.getElementById('monthlyChart'));
    monthlyChart.setOption({
        tooltip: {
            trigger: 'axis',
            formatter: '{b}<br />新增: {c} 个'
        },
        xAxis: {
            type: 'category',
            data: months,
            axisLine: {
                lineStyle: {
                    color: '#95a5a6'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '新增数量',
            nameTextStyle: {
                color: '#7f8c8d',
                padding: [0, 30, 0, 0]
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#95a5a6'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#ecf0f1'
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        series: [{
            name: '新增联系人数量',
            type: 'line',
            data: counts,
            smooth: true,
            symbolSize: 8,
            itemStyle: {
                color: '#3498db'
            },
            lineStyle: {
                width: 4
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(52, 152, 219, 0.6)'
                }, {
                    offset: 1,
                    color: 'rgba(52, 152, 219, 0.1)'
                }])
            },
            label: {
                show: true,
                position: 'top',
                formatter: '{c}',
                color: '#2c3e50',
                fontSize: 12
            }
        }]
    });

    // 2. 处理分类数据（供饼图和柱状图使用）
    const processCategoryData = (rawData) => {
        const categories = [];
        const chartData = [];

        rawData.forEach(item => {
            const key = Object.keys(item)[0];
            const name = item[Object.keys(item)[1]];
            const value = item[key];

            categories.push(name);
            chartData.push({
                name: name,
                value: value
            });
        });

        return { categories, chartData };
    };

    const { categories, chartData } = processCategoryData(dataCountByCategory);

    // 3. 初始化分类饼图
    const pieChart = echarts.init(document.getElementById('pieChart'));
    pieChart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}: {c} ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: categories,
            textStyle: {
                color: '#34495e'
            }
        },
        series: [{
            name: '联系人分类',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: true,
            itemStyle: {
                borderRadius: 6,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold',
                    formatter: '{b}\n{c} ({d}%)'
                }
            },
            labelLine: {
                show: true
            },
            data: chartData,
            color: [
                '#3498db', '#2ecc71', '#9b59b6', '#f1c40f',
                '#e74c3c', '#1abc9c', '#d35400', '#8e44ad'
            ]
        }]
    });

    // 4. 初始化分类柱状图
    const barChart = echarts.init(document.getElementById('barChart'));
    barChart.setOption({
        tooltip: {
            trigger: 'axis',
            formatter: '{b}: {c} 个'
        },
        xAxis: {
            type: 'category',
            data: categories,
            axisLabel: {
                interval: 0,
                rotate: 30
            },
            axisLine: {
                lineStyle: {
                    color: '#95a5a6'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '联系人数量',
            nameTextStyle: {
                color: '#7f8c8d',
                padding: [0, 30, 0, 0]
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#95a5a6'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#ecf0f1'
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        series: [{
            name: '联系人数量',
            type: 'bar',
            data: chartData.map(item => item.value),
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#2ecc71' },
                    { offset: 1, color: '#1abc9c' }
                ]),
                borderRadius: [6, 6, 0, 0]
            },
            barWidth: '40%',
            label: {
                show: true,
                position: 'top',
                color: '#2c3e50',
                fontSize: 12
            }
        }]
    });

    // 响应式调整
    window.addEventListener('resize', function() {
        monthlyChart.resize();
        pieChart.resize();
        barChart.resize();
    });
    /*]]>*/
</script>
</body>
</html>